<template>
    <div style="margin-top: 20px;background-color: #ffffff">
        <!--        <h2>简历登记页面</h2>-->
        <!--简历页面的容器-->
        <div class="resume-register-container">
            <!--基本的信息-->
            <div class="baseInfo-contailer">
                <!-- <span>base INfo</span>-->

                <p style="font-size: 18px;font-weight: bold;margin: 20px 0px 0px 20px">基本信息</p>
                <div class="advator">

                    <img width="150px"
                         height="150px"
                         style="border: 1px solid transparent;border-radius: 50%"
                         v-if="resume.headImgPath!=''" :src="resumeAdvtorImg" class="avatar">

                    <el-upload v-else
                            name="photo"
                            class="avatar-uploader"
                            :action="uploadAdvatorUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img width="150px" height="150px" v-if="resume.headImgPath" :src="resumeAdvtorImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>

                <p class="title" style="position: absolute;top:50px;left: 225px">
                    <span>{{resume.name}}</span>
                </p>
                <p class="base-info" style="position: absolute;top: 95px;left: 225px">
                    <span style="font-size: 14px">{{resume.gender == '1'? '男':'女'}}</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span style="font-size: 14px">{{resume.age}} 岁</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span style="font-size: 14px">{{resume.address}}</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span style="font-size: 14px">{{resume.expWork}} {{resume.expWork!=null || resume.expWork!=''?'年':"" }}</span>&nbsp;
                </p>
                <p class="contract" style="position: absolute;top: 140px;left: 225px;">
                    <span>电话：{{resume.phone}}</span>&nbsp;
                    <span>微信：{{resume.wechat}}</span>&nbsp;
                </p>

                <p style="position: absolute;top: 0px;right: 30px;">
                    <el-button type="text" style="width: 100px"
                    @click="baseInfoHandleDialogVisible = true">编辑</el-button>
                </p>

                <!--基本信息dialog-->
                <el-dialog
                        title="基本信息"
                        :visible.sync="baseInfoHandleDialogVisible"
                        width="60%"
                        :before-close="jobExperienceExpHandleClose">

                    <el-form :model="resume" :inline="true" :rules="ruleBaseInfoForm" ref="resume">

                        <el-col :span="12">
                            <el-form-item label="姓名：" label-width="80px" prop="name">
                                <el-input v-model="resume.name"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="性别：" label-width="80px" prop="gender">
                                <el-select v-model="resume.gender" placeholder="请选择">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="年龄：" label-width="80px" prop="age">
                                <el-input v-model="resume.age" ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="住址：" label-width="80px" prop="address">
                                <el-input v-model="resume.address"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="工作年限：" prop="expWork">
                                <el-input v-model="resume.expWork"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="电话：" label-width="80px" prop="phone">
                                <el-input v-model="resume.phone"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="微信：" label-width="80px" prop="wechat">
                                <el-input v-model="resume.wechat"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="baseInfoHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="baseInfoHandleDialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>

            </div>
            <!--求职意向-->
            <div class="job-intention">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">求职意向</span>
                    <span>
                        <el-button type="text" style="position: absolute;top: 12px;right: 50px"
                                    @click="jobIntentionHandleDialogVisible = true">编辑</el-button>
                    </span>
                </p>

                <p style="position: absolute;top: 44px;left:70px">
                    <span style="font-size: 16px">求职状态：</span>
                    &nbsp;
                    <span style="font-size: 16px">
                        <!--{{resume.jobIntentionEntity.jobStatus}}-->
                        <span v-if="resume.jobIntentionEntity.jobStatus == '1'">在职</span>
                        <span v-else-if="resume.jobIntentionEntity.jobStatus == '2'">已离职</span>
                    </span>
                </p>
                <p style="position: absolute;top: 44px;left: 500px">
                    <span style="font-size: 16px">工作地点：</span>
                    &nbsp;
                    <span style="font-size: 16px">{{resume.jobIntentionEntity.jobAddress}}</span>
                </p>

                <p style="position: absolute;top: 84px;left: 70px">
                    <span style="font-size: 16px">期望行业：</span>
                    &nbsp;
                    <span style="font-size: 16px">{{resume.jobIntentionEntity.expectIndustry}}</span>
                </p>

                <p style="position: absolute;top: 84px;left: 500px">
                    <span style="font-size: 16px">期望职业：</span>
                    &nbsp;
                    <span style="font-size: 16px">{{resume.jobIntentionEntity.expectJob}}</span>
                </p>

                <p style="position: absolute;top: 124px;left: 70px">
                    <span style="font-size: 16px">期望薪资：</span>
                     &nbsp;
                    <span style="font-size: 16px">{{resume.jobIntentionEntity.expSalary}}</span>
                </p>

                <p style="position: absolute;top: 124px;left: 500px">
                    <span style="font-size: 16px">工作性质：</span>
                     &nbsp;
                    <span style="font-size: 16px">
                        <span v-if="resume.jobIntentionEntity.jobNature == '1'">全职</span>
                        <span v-else-if="resume.jobIntentionEntity.jobNature == '2'">兼职</span>
                        <span v-else-if="resume.jobIntentionEntity.jobNature == '3'">实习</span>
                    </span>
                </p>

                <!--求职意向dialog-->
                <el-dialog
                        title="求职意向"
                        :visible.sync="jobIntentionHandleDialogVisible"
                        width="60%"
                       :before-close="jobExperienceExpHandleClose"
                        re
                >

                    <el-form :model="resume.jobIntentionEntity" :inline="true" :rules="jobIntentionEntityRulesForm">
                        <el-col :span="12">
                            <el-form-item label="求职状态：" prop="jobStatus">
                                <el-select v-model="resume.jobIntentionEntity.jobStatus" style="width: 205px">
                                    <el-option label="在职" value="1"></el-option>
                                    <el-option label="已离职" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="工作地点：" prop="jobAddress">
                                <el-col :span="22">
                                    <el-cascader
                                            v-model="expAddressBind"
                                            :options="addressOptiopn"
                                            @change="handleChangeAddress">
                                    </el-cascader>
                                </el-col>
                               <!-- <el-input v-model="resume.jobIntentionEntity.jobAddress"></el-input>-->
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="期望行业：" :label-width="120" prop="expectIndustry">
                                <el-col :span="22">
                                    <el-cascader
                                            v-model="expIndustoryBind"
                                            :options="industoryOption"
                                            @change="handleChangeIndustory">
                                    </el-cascader>
                                </el-col>


                                <!--<el-input v-model="resume.jobIntentionEntity.expectIndustry"></el-input>-->
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="期望职业：" :label-width="120" prop="expectJob">
                                <el-input v-model="resume.jobIntentionEntity.expectJob"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="期望薪资：" :label-width="120" prop="expSalary">
                                <el-input v-model="resume.jobIntentionEntity.expSalary"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="工作性质：" :label-width="120" prop="jobNature">
                                <el-select v-model="resume.jobIntentionEntity.jobNature">
                                    <el-option label="全职" value="1"></el-option>
                                    <el-option label="兼职" value="2"></el-option>
                                    <el-option label="实习" value="3"></el-option>
                                </el-select>
                               <!-- <el-input v-model="resume.jobIntentionEntity.jobNature"></el-input>-->
                            </el-form-item>
                        </el-col>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="jobIntentionHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="jobIntentionHandleDialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>





            </div>
            <!--工作经验-->
            <div class="work-experience-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">工作经验</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="jobExperienceHandleDialogVisible = true">添加一条</el-button>
                    </span>


                </p>
                <!--工作经验 item  循环显示-->
                <div v-for="item in resume.jobExperience" class="work_experience_item">
                    <p style="position: absolute;top: 0px;left: 20px">
                        <span style="font-size: 20px;font-weight: bold">{{item.companyName}}</span>
                        <span style="position: absolute;top: -5px;left: 1225px">
                            <el-button type="text"
                                        @click="removeOneWokExp(item)">移除</el-button>
                        </span>
                    </p>

                    <p style="position: absolute;top: 35px;left: 20px">
                       <span style="font-size: 18px;" >
                            {{item.workTime}}    |    {{item.jobPosition}}    |    {{item.expSalary}}
                       </span>
                    </p>

                    <p style="position: absolute;top: 65px;left: 20px">
                        <span style="font-size: 18px; font-weight: bold">工作描述</span>
                    </p>

                    <p style="position: absolute;top: 90px;left: 20px">
                        <span style="text-indent: 2em">
                            {{item.workDescribe}}
                        </span>
                    </p>
                </div>

                <!--工作经验dialog-->
                <el-dialog
                        title="工作经验"
                        :visible.sync="jobExperienceHandleDialogVisible"
                        width="60%"
                        :before-close="jobExperienceExpHandleClose">

                    <el-form :model="resume.jobExperience" :inline="true" :rules="jobExperienceRulesForm">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="企业名称：" prop="companyName">
                                    <el-input v-model="resume.jobExperience.companyName"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="工作职位：" prop="jobPosition" >
                                    <el-input v-model="resume.jobExperience.jobPosition"  style="width: 310px;"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="薪资范围：" prop="expSalary">
                                    <el-input v-model="resume.jobExperience.expSalary"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="起止时间：" prop="workTime">
                                    <div class="block">
                                       <!-- <p>组件值：{{ value }}</p>-->
                                        <el-date-picker
                                                style="width: 310px;"
                                                v-model="resume.jobExperience.workTime"
                                                type="daterange"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                format="yyyy年MM月dd日"
                                                value-format="yyyy-MM-dd"
                                                :default-time="['00:00:00', '23:59:59']">
                                        </el-date-picker>
                                    </div>
                                    <!--<el-input v-model="resume.jobExperience.workTime"></el-input>-->
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="工作描述：" :label-width="120" prop="workDescribe">
                                    <el-input type="textarea"
                                              style="width: 750px"
                                              v-model="resume.jobExperience.workDescribe"
                                              :rows="5"
                                              maxlength="300"
                                              show-word-limit
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="jobExperienceHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addOneWorkExp()">确 定</el-button>
                  </span>
                </el-dialog>

            </div>
            <!--项目经验-->
            <div class="project-experience-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">项目经验</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="projectExpHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>
                <!--项目经验条目 Item-->
                <div v-for="item in resume.projectExperienceList" class="project_experience_item">
                    <p style="position: absolute;top: 0px;left: 20px">
                        <span style="font-size: 20px;font-weight: bold">
                            {{item.projeftName}}
                        </span>

                        <span style="position: absolute;top: -5px;left: 1225px">
                            <el-button type="text"
                                @click="removeProjectOne(item)">移除</el-button>
                        </span>
                    </p>

                    <p style="position: absolute;top: 30px;left: 20px">
                        <span>项目时间：{{item.projectTime}}</span>&nbsp;
                        <span>|</span>&nbsp;
                        <span>担任角色：{{item.projectRole}}</span>&nbsp;
                        <span>|</span>&nbsp;
                        <span>所属单位：{{item.unit}}</span>&nbsp;
                    </p>

                    <p style="position: absolute;top: 60px;left: 20px">
                        <span style="font-size: 20px;font-weight: bold">项目描述</span>
                    </p>

                    <p style="position: absolute;top: 90px;left: 20px">
                        {{item.projectDescribe}}
                    </p>

                    <p style="position: absolute;top: 140px;left: 20px">
                        <span style="font-size: 20px;font-weight: bold">个人职责</span>
                    </p>

                    <p style="position: absolute;top: 170px;left: 20px">
                        {{item.personalResponsibility}}
                    </p>
                </div>
                <!--项目经验的diaLog-->
                <el-dialog
                        title="项目经验"
                        :visible.sync="projectExpHandleDialogVisible"
                        width="60%"
                        :before-close="projectExpHandleClose">

                    <el-form :model="resume.projectExperienceList" :inline="true" :rules="projectExperienceRulesForm">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="项目名称：" prop="projeftName">
                                    <el-input v-model="resume.projectExperienceList.projeftName"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="项目角色：" prop="projectRole">
                                    <el-input v-model="resume.projectExperienceList.projectRole"></el-input>
                                </el-form-item>
                            </el-col>


                            <el-col :span="12">
                                <el-form-item label="所属单位：" :label-width="120" prop="unit">
                                    <el-input v-model="resume.projectExperienceList.unit"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="结束时间：" :label-width="120" prop="projectTime">
                                    <div class="block">
                                        <el-date-picker
                                                style="width: 210px"
                                                v-model="resume.projectExperienceList.projectTime"
                                                type="date"
                                                placeholder="选择日期"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="项目描述：" :label-width="120" prop="projectDescribe">
                                    <el-input type="textarea"
                                              style="width: 650px"
                                              v-model="resume.projectExperienceList.projectDescribe"
                                              :rows="5"
                                              maxlength="300"
                                              show-word-limit
                                    ></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="个人职责：" :label-width="120" prop="personalResponsibility">
                                    <el-input type="textarea"
                                              style="width: 650px"
                                              v-model="resume.projectExperienceList.personalResponsibility"
                                              :rows="5"
                                              maxlength="300"
                                              show-word-limit
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="projectExpHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click=addOneProject()>确 定</el-button>
                  </span>
                </el-dialog>
            </div>
            <!--教育经历-->
            <div class="education-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">教育经历</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="educationHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>
                <div v-if="resume.educationEntityList.length>0">
                    <div v-for="item in resume.educationEntityList" class="education-item">
                        <p style="margin-left: 20px">
                            <span style="font-size: 18px;font-weight: bold">
                                {{item.universityName}}
                            </span>
                            <span style="position: absolute;top: -5px;left: 1245px">
                                <el-button type="text"
                                            @click="removeOneEducation(item)">移除</el-button>
                            </span>
                        </p>
                        <p style="margin-left: 20px">
                            <span>专业：{{item.major}}</span>
                            <span>|</span>
                            <span>学历：
                                <span v-if="item.educationBackground == '1'">小学</span>
                                <span v-else-if="item.educationBackground == '2'">初中</span>
                                <span v-else-if="item.educationBackground == '3'">高中</span>
                                <span v-else-if="item.educationBackground == '4'">专科</span>
                                <span v-else-if="item.educationBackground == '5'">本科</span>
                                <span v-else-if="item.educationBackground == '6'">211/985普本</span>
                                <span v-else-if="item.educationBackground == '7'">硕士</span>
                                <span v-else-if="item.educationBackground == '8'">博士</span>
                                <span v-else-if="item.educationBackground == '9'">博士后</span>
                                <span v-else-if="item.educationBackground == '10'">学历不限</span>
                                <span v-else>学历不详</span>
<!--                                {{item.educationBackground}}-->
                            </span>
                            <span>|</span>
                            <span>毕业时间：{{item.timeEducation}}</span>
                        </p>
                    </div>
                </div>

                <!--教育经历的diaLog-->
                <el-dialog
                        title="教育经历"
                        :visible.sync="educationHandleDialogVisible"
                        width="60%"
                        :before-close="educationHandleDialogVisibleHandleClose">

                    <el-form :model="resume.educationEntityList" :inline="true"  :rules="educationRulesForm">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="学校名称：" prop="universityName">
                                    <el-input v-model="resume.educationEntityList.universityName"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="学历：" label-width="100px" prop="educationBackground">
                                    <!--<el-input v-model="resume.educationEntityList.educationBackground"></el-input>-->
                                    <el-select v-model = "resume.educationEntityList.educationBackground">
                                        <el-option
                                            v-for="item in educationOption"
                                            :value="item.value"
                                            :label="item.label"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="专业：" label-width="80px" prop="major">
                                    <el-input v-model="resume.educationEntityList.major"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="毕业时间：" label-width="100px" prop="timeEducation">
<!--                                    <el-input v-model=""></el-input>-->
                                    <div class="block">
                                        <el-date-picker
                                                v-model="resume.educationEntityList.timeEducation"
                                                type="date"
                                                placeholder="选择日期"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="educationHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="educationOneAdd()">确 定</el-button>
                  </span>
                </el-dialog>
            </div>
            <!--培训经历-->
            <div class="training-record-experience-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">培训经历</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="trainingRecordHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>

                <div v-if="resume.trainingRecordList.length>0">
                    <div v-for="item in resume.trainingRecordList" class="training-record-item">
                        <p style="margin-left: 20px">
                        <span style="font-size: 18px;font-weight: bold">
                            培训课程：{{item.trainingCourse}}
                        </span>
                            <span style="position: absolute;top: -5px;left: 1245px">
                            <el-button type="text"
                                       @click="removeOneTrainingCourse(item)">移除</el-button>
                        </span>
                        </p>
                        <p style="margin-left: 20px">
                        <span>
                            时间：{{item.trainingTime}}
                        </span>&nbsp;
                            <span>|</span>&nbsp;
                            <span>培训机构：{{item.trainingOrganization}}</span>&nbsp;
                        </p>
                    </div>
                </div>


                <!--培训经历DiaLog-->
                <el-dialog
                        title="培训经历"
                        :visible.sync="trainingRecordHandleDialogVisible"
                        width="60%"
                        :before-close="trainingRecordHandleDialogVisibleHandleClose">

                    <el-form :model="resume.trainingRecordList" :inline="true" :rules="trainingRecordDataForm">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="培训课程：" label-width="100px" prop="trainingCourse">
                                    <el-input v-model="resume.trainingRecordList.trainingCourse"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="培训时间：" label-width="100px" prop="trainingTime">
<!--                                    <el-input v-model="resume.trainingRecordList.trainingTime"></el-input>-->
                                    <div class="block">
                                        <el-date-picker
                                                v-model="resume.trainingRecordList.trainingTime"
                                                type="date"
                                                placeholder="选择日期"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="培训机构：" label-width="100px" prop="trainingOrganization">
                                    <el-input v-model="resume.trainingRecordList.trainingOrganization"></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="trainingRecordHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="trainingRecordAdd()">确 定</el-button>
                   </span>
                </el-dialog>

            </div>
            <!--专业技能-->
            <div class="skill-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">专业技能</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="skillentityHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>
                <div v-if="resume.skillentityList.length>0">
                    <div v-for="item in resume.skillentityList" class="skill-item">
                        <p style="margin-left: 20px">
                            {{item.skillName}}
                            |
                            {{item.level == 0?'一般':'熟练'}}
                        </p>
                        <span style="position: absolute;top: -5px;left: 1245px">
                            <el-button type="text"
                                       @click="removeOneSkill(item)"
                            >移除</el-button>
                    </span>
                    </div>
                </div>

                <!--专业技能-->
                <el-dialog
                        title="专业技能"
                        :visible.sync="skillentityHandleDialogVisible"
                        width="60%"
                        :before-close="skillentityHandleDialogVisibleHandleClose">

                    <el-form :model="resume.skillentityList" :inline="true" :rules="skillentityRulesForm">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="技能名称：" label-width="100px" prop="skillName">
                                    <el-input v-model="resume.skillentityList.skillName"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="掌握水平：" label-width="100px" prop="level">
                                    <el-select v-model="resume.skillentityList.level">
                                        <el-option label="一般" value="0"></el-option>
                                        <el-option label="熟练" value="1"></el-option>
                                    </el-select>
<!--                                    <el-input v-model="resume.skillentityList.level"></el-input>-->
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="skillentityHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addOneSkill()">确 定</el-button>
                   </span>
                </el-dialog>
            </div>
            <!--语言能力-->
            <div class="lanuage-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">语言能力</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="languageEntitiesHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>

                <div v-if="resume.languageEntities.length>0">
                    <div v-for="item in resume.languageEntities" class="lanuage-item">
                        <p style="margin-left: 20px">
                            {{item.lanuageName}}
                            |
                            听说能力：{{item.hearAndSpeakLevel == 0?'一般':'熟练'}}
                            |
                            读写能力：{{item.readAndWriteLevel == 0?'一般':'熟练'}}
                        </p>
                        <span style="position: absolute;top: -5px;left: 1245px">
                                <el-button
                                        type="text"
                                        @click="languageRemove(item)"
                                        >移除</el-button>
                        </span>
                    </div>
                </div>

                <!--语言能力-->
                <el-dialog
                        title="语言能力"
                        :visible.sync="languageEntitiesHandleDialogVisible"
                        width="60%"
                        :before-close="languageEntitiesHandleDialogVisibleHandleClose">

                    <el-form :model="resume.languageEntities" :inline="true" :rules="lanuageRules">
                        <template>
                            <el-col :span="12">
                                <el-form-item label="掌握外语：" label-width="100px" prop="lanuageName">
                                    <el-input v-model="resume.languageEntities.lanuageName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="听说水平：" label-width="100px" prop="hearAndSpeakLevel">
                                    <el-select v-model = "resume.languageEntities.hearAndSpeakLevel">
                                        <el-option label="一般" value="0"></el-option>
                                        <el-option label="熟练" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="读写水平：" label-width="100px" prop="readAndWriteLevel">
                                    <el-select v-model = "resume.languageEntities.readAndWriteLevel">
                                        <el-option label="一般" value="0"></el-option>
                                        <el-option label="熟练" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="languageEntitiesHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="languageAdd()">确 定</el-button>
                   </span>
                </el-dialog>
            </div>
            <!--资格证书-->
            <div class="certificates-container">
                <p style="margin-left: 20px;margin-top: 20px">
                    <span style="font-size: 18px;font-weight: bold">资格证书</span>
                    <span style="margin-left: 1150px">
                        <el-button type="text" @click="certificateEntityHandleDialogVisible = true">添加一条</el-button>
                    </span>
                </p>

                <div v-if="resume.certificateEntityList.length>0">
                    <div v-for="item in resume.certificateEntityList" class="certificates-item">
                        <span v-if="item.certificateName!=undefined && item.gainTime!= undefined">
                            <p style="margin-left: 20px">
                                证书名称： {{item.certificateName}}    |    获得时间：{{item.gainTime}}
                            </p>
                            <span style="position: absolute;top: -5px;left: 1245px">
                                    <el-button type="text"
                                               @click="removeOneCertificate(item)"
                                                >移除</el-button>
                            </span>
                        </span>
                    </div>
                </div>
                <!--资格证书-->
                <el-dialog
                        title="资格证书"
                        :visible.sync="certificateEntityHandleDialogVisible"
                        width="60%"
                        :before-close="certificateEntityHandleDialogVisibleHandleClose">


                    <el-form :model="resume.certificateEntityList" :inline="true"
                        :rules="certificateRules"
                    >
                        <template>
                            <el-col :span="12">
                                <el-form-item label="证书名称：" label-width="100px" prop="certificateName">
                                    <el-input v-model="resume.certificateEntityList.certificateName"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <div class="block">
                                    <el-form-item label="证书获取时间：" label-width="160px" prop="gainTime">
                                        <el-date-picker
                                                v-model="resume.certificateEntityList.gainTime"
                                                type="date"
                                                placeholder="请选择证书的获取时间">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </template>
                    </el-form>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="certificateEntityHandleDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="certificateAdd()">确 定</el-button>
                   </span>
                </el-dialog>
            </div>
            <!--提交按钮-->
            <div class="button-container">
                <el-button type="primary"
                           style="width: 200px"
                           @click="saveResume()"
                            > 保存简历 </el-button>

                <el-button type="default"
                           style="width: 200px"
                           @click="viewPdf()"
                            > 预览简历 </el-button>

<!--                <el-button v-else type="default"-->
<!--                           disabled-->
<!--                           style="width: 200px"-->
<!--                           @click="previewResume()"-->
<!--                > 预览简历 </el-button>-->
            </div>
        </div>
    </div>
</template>

<script>
    import resumeApi from "@/api/resume/resumeApi";
    import pdfApi from "@/api/pfd/pdfApi";
    import commonApi from "@/api/commonApi";
    import user from "@/api/user";
    /*姓名校验*/
    let realNameValidate = (rule ,value,callback) =>{
        if (value == ''){
            callback(new Error('请输入用户名'));
        } else{
            callback();
        }
    }
    /*性别校验*/
    let genderValidate = (rule, value,callback) =>{
        if (value == ''){
            callback(new Error('请选择性别'))
        }else{
            callback();
        }
    }
    /*年龄校验*/
    let ageValidate = (rule, value,callback) =>{
        let age = parseInt(value)
        if (isNaN(age)){
            callback(new Error('不是一个数字,请重新输入'))
        }else if (age<18 || age>65){
            callback(new Error("输入的年龄不合法，请输入18 ~ 65 之间的年龄"))
        }
        else{
            callback();
        }
    }
    /*工龄校验*/
    let expWorkValidate = (rule, value,callback) =>{

        let expWork = parseInt(value)
        if (isNaN(expWork)){
            callback(new Error('不是一个数字,请重新输入'))
        }else if (expWork<0 || expWork>80){
            callback(new Error("输入的年龄不合法，请输入"))
        }
        else{
            callback();
        }
    }
    /*手机号校验*/
    let phoneRegex = "0?(13|14|15|17|18|19)[0-9]{9}"
    /*手机号校验*/
    let validateMobile = (rule, value, callback) => {
        console.log("value ==>", value)
        console.log("value.match(phoneRegex)" ,value.match(new RegExp(phoneRegex)))
        if (value === '') {
            callback(new Error('请输入手机号'));
        }else if (!value.match(phoneRegex)){
            callback(new Error("请输入正确格式的手机号"))
        }
        else {
            callback();
        }
    };
    /*校验微信号*/
    let wechatVaildate = (rule,value,callback) =>{
        if (value == ''){
            callback(new Error("请输入微信号"))
        }else{
            callback()
        }
    }
    /*--------------------------------------------------------------------------------*/

    /*校验证书名称*/
    let certificateNameVaildate = (rule,value,callback) =>{
        console.log("证书名称-----》》》",value)
        if (value == undefined || value == ''){
            callback(new Error("请输入证书名称"))
        }else{
            callback()
        }
    }
    /*校验证书的获取时间*/
    let gainTimeVaildate = (rule,value,callback) => {
        console.log("证书获取时间-----》》》",value)
        if(value == undefined || value == ''){
            callback(new Error("请输入选择证书的获取时间"))
        }else{
            callback()
        }
    }

    /*------------------------语言表单校验------------------------------------*/
    let lanuageNameVaildate = (rule,value,callback) =>{
        console.log("语言名称",value)
        if(value == undefined || value == ''){
            callback(new Error("请输入掌握的语言名称"))
        }else{
            callback()
        }
    }
    let hearAndSpeakLevelVaildate =  (rule,value,callback) => {
        if (value == undefined || value == ''){
            callback(new Error("请选择阅读掌握水平"))
        }else{
            callback()
        }
    }
    let readAndWriteLevelVaildate = (rule,value,callback) => {
        if (value == undefined || value == ''){
            callback(new Error("请选择写作掌握水平"))
        }else{
            callback()
        }
    }

    /*------------------------技能校验---------------------------------------------*/
    let skillNameVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请输入掌握的技能名称"))
        }else{
            callback()
        }
    }

    let levelVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择语言掌握的熟练度"))
        }else{
            callback()
        }
    }



    /*---------------------培训经历----------------------------------*/
    let trainingVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写培训的课程"))
        }else{
            callback()
        }
    }

    let trainingTimeVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择培训的时间"))
        }else{
            callback()
        }
    }

    let trainingOrganizationVaildate = (rule,value,callback) =>{
        if(value == undefined || value == ''){
            callback(new Error("请填写培训机构"))
        }else{
            callback()
        }
    }

    /*-------------------------------教育经历----------------------*/
    let universityNameVaildate = (rule,value,callback) =>{
        if(value == undefined || value == ''){
            callback(new Error("请填写学校名称"))
        }else{
            callback()
        }
    }

    let educationBackgroundVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择教育背景"))
        }else{
            callback()
        }
    }

    let majorVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写专业"))
        }else{
            callback()
        }
    }

    let timeEducationVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择毕业时间"))
        }else{
            callback()
        }
    }
    /*--------------------------------------项目经历------------------------------------*/
    let projeftNameVaildate = (rule,value,callback) =>{
        if(value == undefined || value == ''){
            callback(new Error("请填写项目名称"))
        }else{
            callback()
        }
    }

    let projectRoleVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写项目角色"))
        }else{
            callback()
        }
    }

    let unitVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写工作单位"))
        }else{
            callback()
        }
    }

    let projectTimeVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写项目结束时间"))
        }else{
            callback()
        }
    }

    let projectDescribeVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写项目描述"))
        }else{
            callback()
        }
    }

    let personalResponsibilityVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写项目职责"))
        }else{
            callback()
        }
    }

    /*-------------------------工作经验-----------------------------*/
    let companyNameVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写工作名称"))
        }else{
            callback()
        }
    }

    let jobPositionVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写工作职位"))
        }else{
            callback()
        }
    }

    let expSalaryVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写期望薪资"))
        }else{
            callback()
        }
    }

    let workTimeVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择工作时间"))
        }else{
            callback()
        }
    }

    let workDescribeVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写工作描述"))
        }else{
            callback()
        }
    }

    /*求职意向*/
    let jobStatusVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写目前求职状态"))
        }else{
            callback()
        }
    }

    let jobAddressVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择期望工作地点"))
        }else{
            callback()
        }
    }

    let expectIndustryVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择期望行业"))
        }else{
            callback()
        }
    }

    let expectJobVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择期望岗位"))
        }else{
            callback()
        }
    }

    let expSalaryInVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请填写期望薪资"))
        }else{
            callback()
        }
    }

    let jobNatureVaildate = (rule,value,callback) => {
        if(value == undefined || value == ''){
            callback(new Error("请选择工作性质"))
        }else{
            callback()
        }
    }


    export default {
        inject:['reload'],
        name: "resume-register",
        data(){

            return {

                expAddressBind:[],
                expIndustoryBind:[],


                industoryOption:[],                      //行业信息
                addressOptiopn:[],                      //地址信息
                educationOption: [],                    //教育列表

                uploadAdvatorUrl: '',
                resumeAdvtorImg: null,
                baseInfoHandleDialogVisible: false,              //基本信息Dialog
                jobIntentionHandleDialogVisible: false,          //求职意向Dialog
                projectExpHandleDialogVisible: false,            //项目经验Dialog
                educationHandleDialogVisible: false,             //教育经历Dialog
                trainingRecordHandleDialogVisible: false,        //培训经历Dialog
                skillentityHandleDialogVisible: false,           //专业技能Dialog
                languageEntitiesHandleDialogVisible: false,      //语言能力Dialog
                certificateEntityHandleDialogVisible: false,     //资格证书Dialog
                jobExperienceHandleDialogVisible: false,         //工作经验Dialog


                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,

                isSaveResume: 0,
                resume: {
                    userId: "",
                    name: '',
                    headImgPath: '',
                    gender: '',
                    age: '',
                    address: '',
                    expWork: '',
                    phone: '',
                    email: '',
                    wechat: '',

                    jobIntentionEntity: {
                        jobStatus: '',
                        jobAddress: '',
                        expectIndustry: '',
                        expectJob: '',
                        expSalary: '',
                        jobNature: ''
                    },

                    jobExperience: [],
                    // {
                    //     companyName:'',
                    //     workTime:'',
                    //     jobPosition:'',
                    //     expSalary:'',
                    //     major:'',
                    //     workDescribe:''
                    // },

                    projectExperienceList: [],
                    // {
                    //     projeftName:'',
                    //     projectTime:'',
                    //     projectRole:'',
                    //     unit:'',
                    //     projectDescribe:'',
                    //     personalResponsibility:''
                    // }

                    educationEntityList: [],
                    // {
                    //     universityName:'',
                    //     major:'',
                    //     educationBackground:'',
                    //     timeEducation:''
                    // }

                    trainingRecordList: [],
                    // {
                    //     trainingCourse:'',
                    //     trainingTime:'',
                    //     trainingOrganization:''
                    // }

                    skillentityList: [],
                    // {
                    //     skillName:'',
                    //     level:''
                    // }

                    languageEntities: [],
                    // {
                    //     lanuageName:'',
                    //     hearAndSpeakLevel:'',
                    //     readAndWriteLevel:''
                    // }

                    certificateEntityList: [
                        // {
                        //     certificateName:'',
                        //     gainTime:''
                        // }
                    ],
                    // {
                    //     certificateName:'',
                    //     gainTime:''
                    // },
                    // {
                    //     certificateName:'',
                    //     gainTime:''
                    // }

                },
                /*基本信息校验*/
                ruleBaseInfoForm: {
                    name: [
                        {validator: realNameValidate, trigger: 'blur'}
                    ],
                    genderValidate: [
                        {validator: genderValidate, trigger: 'blur'}
                    ],
                    age: [
                        {validator: ageValidate, trigger: 'blur'}
                    ],
                    expWork: [
                        {validator: expWorkValidate, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validateMobile, trigger: 'blur'}
                    ],
                    wechat: [
                        {validator: wechatVaildate, trigger: 'blur'}
                    ]
                },
                /*证书列表表单校验*/
                certificateRules: {
                    certificateName: [
                        {validator: certificateNameVaildate, trigger: 'blur'}
                    ],
                    gainTime: [
                        {validator: gainTimeVaildate, trigger: 'blur'}
                    ],
                },

                /*语言表单校验*/
                lanuageRules: {
                    lanuageName: [
                        {validator: lanuageNameVaildate, trigger: 'blur'}
                    ],
                    hearAndSpeakLevel: [
                        {validator: hearAndSpeakLevelVaildate, trigger: 'blur'}
                    ],
                    readAndWriteLevel: [
                        {validator: readAndWriteLevelVaildate, trigger: 'blur'}
                    ]
                },

                /*技能校验*/
                skillentityRulesForm: {
                    skillName: [
                        {validator: skillNameVaildate, trigger: 'blur'}
                    ],
                    level: [
                        {validator: levelVaildate, trigger: 'blur'}
                    ]
                },

                /*培训经历校验*/
                trainingRecordDataForm: {
                    trainingCourse: [
                        {validator: trainingVaildate, trigger: 'blur'}
                    ],
                    trainingTime: [
                        {validator: trainingTimeVaildate, trigger: 'blur'}
                    ],
                    trainingOrganization: [
                        {validator: trainingOrganizationVaildate, trigger: 'blur'}
                    ],
                },
                /*教育经历表单校验*/
                educationRulesForm: {
                    universityName: [
                        {validator: universityNameVaildate, trigger: 'blur'}
                    ],
                    educationBackground: [
                        {validator: educationBackgroundVaildate, trigger: 'blur'}
                    ],
                    major: [
                        {validator: majorVaildate, trigger: 'blur'}
                    ],
                    timeEducation: [
                        {validator: timeEducationVaildate, trigger: 'blur'}
                    ]
                },
                /*项目经验*/
                projectExperienceRulesForm: {
                    projeftName: [
                        {validator: projeftNameVaildate, trigger: 'blur'}
                    ],
                    projectRole: [
                        {validator: projectRoleVaildate, trigger: 'blur'}
                    ],
                    unit: [
                        {validator: unitVaildate, trigger: 'blur'}
                    ],
                    projectTime: [
                        {validator: projectTimeVaildate, trigger: 'blur'}
                    ],
                    projectDescribe: [
                        {validator: projectDescribeVaildate, trigger: 'blur'}
                    ],
                    personalResponsibility: [
                        {validator: personalResponsibilityVaildate, trigger: 'blur'}
                    ]
                },
                /*工作经历校验*/
                jobExperienceRulesForm:{
                    companyName:[
                        {validator: companyNameVaildate, trigger: 'blur'}
                    ],
                    jobPosition:[
                        {validator: jobPositionVaildate, trigger: 'blur'}
                    ],
                    expSalary:[
                        {validator: expSalaryVaildate, trigger: 'blur'}
                    ],
                    workTime:[
                        {validator: workTimeVaildate, trigger: 'blur'}
                    ],
                    workDescribe:[
                        {validator: workDescribeVaildate, trigger: 'blur'}
                    ]
                },

                /*求职意向*/
                jobIntentionEntityRulesForm:{
                    jobStatus:[
                        {validator: jobStatusVaildate, trigger: 'blur'}
                    ],
                    jobAddress:[
                        {validator: jobAddressVaildate, trigger: 'blur'}
                    ],
                    expectIndustry:[
                        {validator: expectIndustryVaildate, trigger: 'blur'}
                    ],
                    expectJob:[
                        {validator: expectJobVaildate, trigger: 'blur'}
                    ],
                    expSalary:[
                        {validator: expSalaryInVaildate, trigger: 'blur'}
                    ],
                    jobNature:[
                        {validator: jobNatureVaildate, trigger: 'blur'}
                    ]
                }
            }
        },

        mounted() {

            //console.log("resumeAdvtorImg ============>",typeof this.resumeAdvtorImg)

            this.loadingResume()
            this.showBase64AdvatorImg()
            this.uploadUrl()
            this.loadingEducation()

            this.loadingAddress()
            this.loadingIndustory()
        },
        methods:{
            /*加载地址信息*/
            loadingAddress(){
                commonApi.loadingCompanyAddress()
                .then(data => {
                    //console.log("address ===>",data)
                    if(data.data.code === 0){
                        this.addressOptiopn = data.data.data
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },
            /*加载行业信息*/
            loadingIndustory(){
                commonApi.loadingIndustory()
                .then(data => {
                    //console.log("loadingIndustory ===>",data)
                    if(data.data.code === 0){
                        this.industoryOption = data.data.data
                    }

                })
                .catch(err => {
                    Promise.reject(err)
                })
            },

            /*加载学历*/
            loadingEducation(){
                commonApi.loadingEducation()
                    .then(data => {
                        //console.log("data education ==>",data)
                        if(data.data.code == 0){
                            this.educationOption = data.data.data
                        }
                    })
            },

            uploadUrl(){
                const userId = JSON.parse(localStorage.getItem("user")).userId
                this.uploadAdvatorUrl = 'http://localhost:8002/liepin/pdfApi/resumeUploadAdvator/' + userId
            },
            //将简历上的图片转码Base64并且显示在页面上
            showBase64AdvatorImg(){
                const userId = JSON.parse(localStorage.getItem("user")).userId
                //resumeAdvtorImg
                pdfApi.showBase64AdvatorImg(userId)
                .then(data => {
                    //console.log("images advator ===>> ",data)
                    if (data.data.code === 0){
                        this.resumeAdvtorImg = data.data.data
                        //this.reload()
                    }
                })
                .catch(err =>{
                    Promise.reject(err)
                })
            },


            /*添加一条证书信息*/
            certificateAdd(){
                const certificateName = this.resume.certificateEntityList.certificateName
                const gainTime = this.resume.certificateEntityList.gainTime

                let date = new Date(gainTime)
                let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

                const obj = {
                    certificateName:certificateName,
                    gainTime:fullDate
                }
                this.resume.certificateEntityList.push(obj)

                this.resume.certificateEntityList.certificateName = ''
                this.resume.certificateEntityList.gainTime = ''

                this.certificateEntityHandleDialogVisible = false;
                this.$message({
                    type:'success',
                    message:'添加证书成功'
                })
            },
            removeOneCertificate(item){
                this.resume.certificateEntityList = this.resume.certificateEntityList.filter(items => item.certificateName != items.certificateName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },

            /*添加一条语言信息*/
            languageAdd(){
                //
                const lanuageName = this.resume.languageEntities.lanuageName
                const hearAndSpeakLevel = this.resume.languageEntities.hearAndSpeakLevel
                const readAndWriteLevel = this.resume.languageEntities.readAndWriteLevel
                const obj = {
                    lanuageName:lanuageName,
                    hearAndSpeakLevel:hearAndSpeakLevel,
                    readAndWriteLevel:readAndWriteLevel
                }
                this.resume.languageEntities.push(obj)

                this.resume.languageEntities.lanuageName = ''
                this.resume.languageEntities.hearAndSpeakLevel = ''
                this.resume.languageEntities.readAndWriteLevel = ''

                this.languageEntitiesHandleDialogVisible = false;
                this.$message({
                    type:'success',
                    message:'添加语言成功'
                })
            },
            languageRemove(item){
                this.resume.languageEntities = this.resume.languageEntities.filter(items => item.lanuageName != items.lanuageName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },

            /*添加一条专业技能*/
            addOneSkill(){
                const skillName = this.resume.skillentityList.skillName
                const level = this.resume.skillentityList.level
                const obj = {
                    skillName:skillName,
                    level:level
                }
                this.resume.skillentityList.push(obj)

                this.resume.skillentityList.skillName = ''
                this.resume.skillentityList.level = ''
                debugger

                this.skillentityHandleDialogVisible = false
                this.$message({
                    type:'success',
                    message:'添加一条技能'
                })


            },
            removeOneSkill(item){
                this.resume.skillentityList = this.resume.skillentityList.filter(items => item.skillName != items.skillName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },

            /*添加一条培训课程*/
            trainingRecordAdd(){
                const trainingCourse = this.resume.trainingRecordList.trainingCourse
                const trainingTime = this.resume.trainingRecordList.trainingTime
                const trainingOrganization = this.resume.trainingRecordList.trainingOrganization

                const obj = {
                    trainingCourse:trainingCourse,
                    trainingTime:trainingTime,
                    trainingOrganization:trainingOrganization
                }

                this.resume.trainingRecordList.trainingCourse = ''
                this.resume.trainingRecordList.trainingTime = ''
                this.resume.trainingRecordList.trainingOrganization = ''

                this.trainingRecordHandleDialogVisible = false
                this.$message({
                    type:'success',
                    message:'添加一条技能'
                })
                this.resume.trainingRecordList.push(obj)
            },
            removeOneTrainingCourse(item){
                this.resume.trainingRecordList = this.resume.trainingRecordList.filter(items => item.trainingCourse != items.trainingCourse)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },

            /*添加一条教育经历*/
            educationOneAdd(){
                const universityName = this.resume.educationEntityList.universityName
                const major = this.resume.educationEntityList.major
                const educationBackground = this.resume.educationEntityList.educationBackground
                const timeEducation = this.resume.educationEntityList.timeEducation
                const obj = {
                    universityName:universityName,
                    major:major,
                    educationBackground:educationBackground,
                    timeEducation:timeEducation
                }

                this.resume.educationEntityList.push(obj)

                this.resume.educationEntityList.universityName = ''
                this.resume.educationEntityList.major = ''
                this.resume.educationEntityList.educationBackground = ''
                this.resume.educationEntityList.timeEducation = ''

                this.educationHandleDialogVisible = false
            },
            removeOneEducation(item){
                this.resume.educationEntityList = this.resume.educationEntityList.filter(items => item.universityName != items.universityName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },


            /*添加一条项目经历*/
            addOneProject(){

                const projeftName = this.resume.projectExperienceList.projeftName
                const projectTime = this.resume.projectExperienceList.projectTime
                const projectRole = this.resume.projectExperienceList.projectRole
                const unit = this.resume.projectExperienceList.unit
                const projectDescribe = this.resume.projectExperienceList.projectDescribe
                const personalResponsibility = this.resume.projectExperienceList.personalResponsibility

                const obj = {
                    projeftName:projeftName,
                    projectTime:projectTime,
                    projectRole:projectRole,
                    unit:unit,
                    projectDescribe:projectDescribe,
                    personalResponsibility:personalResponsibility
                }

                this.resume.projectExperienceList.push(obj)

                this.resume.projectExperienceList.projeftName = ''
                this.resume.projectExperienceList.projectTime = ''
                this.resume.projectExperienceList.projectRole = ''
                this.resume.projectExperienceList.unit = ''
                this.resume.projectExperienceList.projectDescribe = ''
                this.resume.projectExperienceList.personalResponsibility = ''

                this.$message({
                    type:'success',
                    message:'添加一条项目经验成功'
                })

                this.projectExpHandleDialogVisible = false
            },
            removeProjectOne(item){
                this.resume.projectExperienceList = this.resume.projectExperienceList.filter(items => item.projeftName != items.projeftName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },


            /*添加一条工作经验*/
            addOneWorkExp(){
                const companyName = this.resume.jobExperience.companyName
                const workTime = this.resume.jobExperience.workTime
                const jobPosition = this.resume.jobExperience.jobPosition
                const expSalary = this.resume.jobExperience.expSalary
                const major = this.resume.jobExperience.major
                const workDescribe = this.resume.jobExperience.workDescribe

                let begainTime =  workTime[0]
                let endTime = workTime[1]

                const fullTime = begainTime + '至' + endTime


                const obj = {
                    companyName:companyName,
                    workTime:fullTime,
                    jobPosition:jobPosition,
                    expSalary:expSalary,
                    major:major,
                    workDescribe:workDescribe
                }

                this.resume.jobExperience.push(obj)


                this.resume.jobExperience.companyName = ''
                this.resume.jobExperience.workTime = ''
                this.resume.jobExperience.jobPosition = ''
                this.resume.jobExperience.expSalary = ''
                this.resume.jobExperience.major = ''
                this.resume.jobExperience.workDescribe = ''

                this.jobExperienceHandleDialogVisible = false
                this.$message({
                    type:'success',
                    message:'添加一条工作经验成功'
                })
            },
            removeOneWokExp(item){
                this.resume.jobExperience = this.resume.jobExperience.filter(items => item.companyName != items.companyName)
                this.$message({
                    type:'success',
                    message:'移除一条记录成功'
                })
            },
            /*保存简历*/
            saveResume(){
                this.isSaveResume = 1;      //修改一下状态
                const userId = JSON.parse(localStorage.getItem('user')).userId;
                this.resume.userId = userId
                console.log("this is resume ===>>",this.resume)
                resumeApi.saveResume(this.resume)
                .then(data => {
                    if (data.data.code === 0){
                        this.$message({
                            type:"success",
                            message:'简历保存成功'
                        })
                    }
                })
                .catch(error => {
                    Promise.reject(error)
                })
            },

            loadingResume(){
                const userId = JSON.parse(localStorage.getItem('user')).userId;
                resumeApi.reflectResumeObj(userId)
                .then(data => {
                    console.log("loadingResume ===> ",data)
                    if (data.data.code === 0 && data.data.data!=undefined){
                        console.log("this .data.data",data.data.data)
                        this.resume = data.data.data
                    }else if(data.data.code === 500){
                        this.$message({
                            type:'info',
                            message: data.data.msg
                        })
                    }
                })
                .catch(error => {
                    Promise.reject(error)
                })
            },

            viewPdf() {
                const userId = JSON.parse(localStorage.getItem('user')).userId
                pdfApi.getBase64(userId)
                    .then(data=>{
                        console.log("base64 ==>",data)
                        //将Base64进制的编码放入到localStroage中
                        //localStorage.setItem("pdfbase64",data.data.data)
                        //给pdfReview这个页面进行处理
                        //this.$router.push(`/home/pdfReview`)
                        //const content = localStorage.getItem('pdfbase64')
                        let url = this.createDownloadFileUrl('pdf预览', data.data.data)
                        console.log(url)
                        //this.pSrc = url
                        window.open(url)

                    })
            },
            createDownloadFileUrl(fileName, file) {
                var blob = this.dataURLtoFile(
                    `data:application/pdf;base64,${file}`,
                    fileName
                ) // application/zip 需要改成要下载文件的类型
                blob.lastModifiedDate = new Date()
                blob.name = fileName
                return URL.createObjectURL(blob)
            },
            dataURLtoFile(dataurl, filename) {
                // 生成Blob
                var arr = dataurl.split(',')
                var mime = arr[0].match(/:(.*?);/)[1]
                var bstr = atob(arr[1])
                var n = bstr.length
                var u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new Blob([u8arr], {type: mime})
            },





            /*预览简历*/
            previewResume(){
                const userId = JSON.parse(localStorage.getItem('user')).userId
                pdfApi.getBase64(userId)
                .then(data=>{
                    console.log("base64 ==>",data)
                    //将Base64进制的编码放入到localStroage中
                    localStorage.setItem("pdfbase64",data.data.data)
                    //给pdfReview这个页面进行处理
                    this.$router.push(`/home/pdfReview`)
                })
            },

            //文件上传成功以后执行的方法
            handleAvatarSuccess(res, file){
                console.log("res ===>>",res)
                console.log("file ===>>", file)
                this.resume.headImgPath
                this.resumeAdvtorImg = URL.createObjectURL(file.raw);
               // console.log("this.resumeAdvtorImg  ===>>",this.resumeAdvtorImg)
                this.resume.headImgPath = res.headImgPath
                //this.reload()
            },
            //限定文件上传的类型
            beforeAvatarUpload(file) {

                console.log("file type",file.type)

                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                const isPNG = 'image/png';
                if (!(isJPG || isPNG)) {
                    this.$message({
                        type:'warning',
                        message:'上传头像图片只能是 JPG或者是PNG 格式!'
                    })
                    return
                    //this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message({
                        type:'warning',
                        message:'上传头像图片大小不能超过 2MB!'
                    })
                    return
                    //this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            // projectExpHandleClose         dialog
            projectExpHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // jobExperienceExpHandleClose   dialog
            jobExperienceExpHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // educationHandleDialogVisibleHandleClose dialog
            educationHandleDialogVisibleHandleClose(done){

                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // trainingRecordHandleDialogVisibleHandleClose dialog
            trainingRecordHandleDialogVisibleHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //languageEntitiesHandleDialogVisibleHandleClose dialog
            languageEntitiesHandleDialogVisibleHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //skillentityHandleDialogVisibleHandleClose dialog
            skillentityHandleDialogVisibleHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //certificateEntityHandleDialogVisibleHandleClose dialog
            certificateEntityHandleDialogVisibleHandleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },


            /*级联选择器*/
            handleChangeIndustory(value){
                console.log("行业的value ===》",value)

                const tradeId = value[0]
                const classifyId = value[1]
                const jobTypeId = value[2]


                commonApi.industoryInfoString(value)
                .then(data => {
                 if(data.data.code === 0){

               /*      console.log("data industoryInfoString==>",data.data.data[0].replaceAll('|','/'))*/
                    this.resume.jobIntentionEntity.expectIndustry = data.data.data[0].replaceAll('|','/')
                 }

                })

    /*            this.dataForm.tradeId = value[0]
                this.dataForm.classifyId = value[1]
                this.dataForm.jobTypeId = value[2]*/
            },
            handleChangeAddress(value){
                console.log("地址的value ===》",value)

                const provincesId = value[0]
                const cityesId = value[1]
                const areasId = value[2]


                commonApi.addresInfoString(value)
                .then(data => {
                    if (data.data.code === 0){
                        const address = data.data.data[0] + "/" + data.data.data[1] + "/" + data.data.data[2]
                        /*console.log("data  addresInfoString ====>",address)*/
                        this.resume.jobIntentionEntity.jobAddress = address
                    }
                })
                // this.dataForm.provincesId = value[0]
                // this.dataForm.cityesId = value[1]
                // this.dataForm.areasId = value[2]
            }
        },
        watch:{
            'resume':{
                handler(){
                    if (this.isSaveResume == 1){
                        this.isSaveResume = 0;
                    }
                },
                deep:true
            },
        }
    }
</script>

<style>

    .clearfix:before,
    .clearfix:after{
        content:"";
        display:table;
    }

    .button-container{
        text-align: center;
        position: relative;
        width: 100%;
        margin-top: 10px;
        /*height: 230px;*/
        border: 1px solid transparent;
        background-color: #FAFAFA;
    }


    .resume-register-container {
        width: 1360px;
        /*height: 500px;*/
        margin: 0 auto;
        /*background-color: #BBffaa;*/
    }

    /*User - Base - Info*/
    .baseInfo-contailer {
        position: relative;
        width: 100%;
        height: 230px;
        border: 1px solid transparent;
        background-color: #FAFAFA;
    }
    .el-upload--picture-card{
        border-radius: 50%;
    }
    el-upload-list__item-actions{
        border-radius: 50%;
    }

    .advator{
        position: absolute;
        top: 60px;
        left: 45px;
        width: 150px;
        height: 150px;
        border: 1px solid transparent;
        border-radius: 50%;
        /*background-color: rebeccapurple;*/
    }


    /* 求职意向 */
    .job-intention {
        position: relative;
        width: 100%;
        height: 180px;
        margin-top: 15px;
        border: 1px solid transparent;
        background-color: #FAFAFA;
    }

    .work-experience-container{
        position: relative;
        margin-top: 15px;
        width: 100%;

        /*height: 200px;*/
        border: 1px solid transparent;
        background-color: #FAFAFA;
    }
    /*工作 item 的样式*/
    .work_experience_item{
        position: relative;
        width: 100%;
        height: 180px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }


    /* 项目经验容器 */
    .project-experience-container{
        width: 100%;
        background-color: #FAFAFA;
    }
    .project_experience_item{
        position: relative;
        width: 100%;
        height: 250px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }

    /* 教育经历容器 */
    .education-container{
        width: 100%;
        background-color: #FAFAFA;
    }

    .education-item{
        position: relative;
        width: 100%;
        height: 100px;
        /*background-color: #FF7011;*/
        /*margin-top: 10px;*/
    }
    /*培训经历*/
    .training-record-experience-container{
        width: 100%;
        background-color: #FAFAFA;
    }
    .training-record-item{
        position: relative;
        width: 100%;
        height: 100px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }

    /*技能容器*/
    .skill-container{
        width: 100%;
        background-color: #FAFAFA;
    }

    .skill-item{
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }

    .lanuage-container{
        width: 100%;
        background-color: #FAFAFA;
    }
    .lanuage-item{
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }

    .certificates-container{
        width: 100%;
        background-color: #FAFAFA;
        /*border-top: 1px solid rebeccapurple;*/
    }
    .certificates-item{
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        /*background-color: #FF7011;*/
        margin-top: 10px;
    }


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
        background: #FFF;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
</style>
